<template>
  <div
      class="container-value"
      :style="{
            top: (10  + topOffset) + '%',
            left: 80 + '%',
            width: '18%',
            height: '30%',
            opacity: visible ? 1 : 0
        }"
  >

    <div class="heart">
      <img src="https://comps.videohudong.com/ivimg/2049D42B6694D6EA6C4AA3D5856F525F88873087FD027092C961AC1F216FBF7C.png">
      <p class="attr-value">{{ attrName }}<br>+{{ attrValue }}</p>
    </div>
    <!-- <p class="attr-name">{{ attrName }}</p> -->

  </div>
</template>
<script>
export default {
  data() {
    return {
      topOffset: 0,   // 新增：用于控制上移距离
      attrName: '',
    };
  },
  mounted() {

    var isShow = false;
    this.bridge.on('player', 'timeupdate', time => {
      if (time >= this.startTime) {
        if(this.visible || isShow)return
        isShow = true

        console.log('2开始显示好感度')
        this.bridge.invoke('utils','getValueName',this.attrKey).then((v) =>{
          console.log('好感度名字1:',v);
          this.attrName = v;
        });
        // this.bridge.getValueName(this.attrKey).then((v) =>{
        //     console.log('好感度名字:',v);
        //     this.attrName = v;
        // });

        this.show();
        this.topOffset = -3;

        // 步骤2 通知引擎销毁当前组件
        setTimeout(() => {
          console.log('销毁好感度组件了')
          this.$emit('requestdestroy');
        }, 3500);

      }
    });

  }
};
</script>
<style>

.container-value {
  position: absolute;
  background-size: 100% 100%;
  transition: opacity 1s, top .5s;
}

.heart {
  top: 30%;
  position: relative;
  animation: scaleAni 1s ease-in-out -1s infinite;
}

@keyframes scaleAni {
  from {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1.2);
  }
  to {
    transform: scale(0.9);
  }
}


.attr-value {
  text-align: center;
  color: white;
  font-weight: bold;
  font-size: 0.3rem;

  position: absolute;
  left: 50%;
  transform: translate(-50%, -40%);
}

.attr-name {
  text-align: center;
  color: white;
  font-size: 0.5rem;
  text-stroke: 0.02rem #FB514D;
  -webkit-text-stroke: 0.02rem #FB514D;

  position: absolute;
  top: 74%;
  left: 50%;
  transform: translate(-50%, -50%);
}

img {
  position: absolute;
  width: 1.8rem;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
}


</style>
